/**
 * 表单--绑定-->状态
 */
import React from 'react';
import ReactDOM from 'react-dom/client';

class Mytxt extends React.Component{
    state={
        stname:'temo',
        city:'吉安市',
        area:'江西省',
        flag:true
    }
    //文本框被改变事件(不绑定会报错)
    txthandle=(e)=>{
        //绑定stname值(实现vue中的双向绑定)
        this.setState({
            stname:e.target.value
        })
        console.log(e.target.value);
    }

    areahandle=(e)=>{
        this.setState({
            area:e.target.value
        })
        console.log(this.state.area);
    }

    selhandle=(e)=>{
        this.setState({
            city:e.target.value
        })
        console.log(this.state.city);
    }

    checkhandle=(e)=>{
        this.setState({
            flag:e.target.checked
        })
        console.log(this.state.flag);
    }
    render(){
        return(
            <div>
                <h1>表单测试</h1>
                <p>输入框:<input onChange={this.txthandle} type='text' value={this.state.stname} /></p>
                <p>文本域:<textarea onChange={this.areahandle} value={this.state.area}></textarea></p>
                <p>
                下拉列表-城市选择:
                    <select onChange={this.selhandle} value={this.state.city}>
                        <option value="南昌市">南昌市</option>
                        <option value="宜春市">宜春市</option>
                        <option value="吉安市">吉安市</option>
                    </select>
                </p>
                <p>
                    复选框:<input type="checkbox" checked={this.state.flag} onChange={this.checkhandle} />是否选择
                </p>
            </div>
        )
    }
}

export default Mytxt